<template>
	<view style="background: #f6f6f6;min-height: 100vh;">
		<view class="" style="width: 100%;height: 100%;" v-if="refundDetail.id">
			<view class="" style="background: #EB0909;padding: 80rpx 0;">
				<tn-steps :list="list" mode="dotIcon" :current="current" @click="click" activeColor="#ffffff"></tn-steps>
			</view>
			<view class="" style="width: 100%;margin-top: -80rpx;padding: 20rpx 20rpx;">
				<view class="" style="background: #fff;padding: 30rpx;border-radius: 15rpx;">
					<view class="" style="" style="display: flex;justify-content: space-between;align-items: center;" @click="refundLog">
						<view class="" style="display: flex;flex-direction: column;justify-content: space-around;">
							<view class="" style="font-size: 28rpx;margin-bottom: 20rpx;">{{ refundDetail.aftersale_status_desc }}</view>
							<view class="" style="font-size: 24rpx;color: #999999;">{{ refundDetail.updatetime }}</view>
						</view>
						<view class=""><text class="tn-icon-right"></text></view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;padding: 0rpx 20rpx;">
				<view class="" style="background: #fff;padding: 30rpx;border-radius: 15rpx;">
					<view class="" style="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="" style="font-size: 28rpx;">退款总额</view>
						<view class="" style="color: #ff3000;">￥0.00</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;padding: 0rpx 20rpx;margin-top: 20rpx;">
				<view class="" style="background: #fff;padding: 30rpx;border-radius: 15rpx;">
					<view class="" style="" style="display: flex;">
						<!-- 	<view class="" style="font-size: 28rpx;">买家申请了售后，请及时处理</view>
						<view class=""><text class="tn-icon-right"></text></view> -->
						<image :src="info.app.cdnurl+refundDetail.goods_image" mode="widthFix" style="width: 160rpx;">
						</image>
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;margin-left: 20rpx;">
							<view class="" style="font-size: 28rpx;">{{refundDetail.goods_title}}</view>
							<view class="" style="font-size: 26rpx;display: flex;">
								<view class="">￥{{refundDetail.goods_price}}</view>
								<view class="" style="color: #999999;margin-left: 15rpx;">x {{refundDetail.goods_num}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="" style="width: 100%;padding: 0rpx 20rpx;margin-top: 20rpx;">
				<view class="" style="background: #fff;border-radius: 15rpx;padding: 20rpx;">
					<view class="flexCenter">
						<view class="title2">服务单号：</view>
						<view class="right2">{{ refundDetail.aftersale_sn }}</view>
					</view>
					<view class="flexCenter">
						<view class="title2">申请时间：</view>
						<view class="right2">{{ refundDetail.updatetime }}</view>
					</view>
					<view class="flexCenter">
						<view class="title2">售后类型：</view>
						<view class="right2">{{ refundDetail.type_text }}</view>
					</view>
					<view class="flexCenter">
						<view class="title2">申请原因：</view>
						<view class="right2">{{ refundDetail.reason }}</view>
					</view>
					<view class="flexCenter">
						<view class="title2">相关描述：</view>
						<view class="right2">{{ refundDetail.content }}</view>
					</view>
				</view>
			</view>
			
			<view class="" style="position: fixed;bottom: 0;background: #fff;padding: 20rpx 0;width: 100%;">
				<view class="" style="width: 100%;display: flex;justify-content: flex-end;padding: 0 30rpx;" >
					<tn-button backgroundColor="#eeeeee" fontColor="#080808" shape="round" @click="cancel" v-for="item in refundDetail.btns" v-if="item=='cancel'">取消申请</tn-button>
				</view>
			</view>
		</view>
			
			 <tn-empty v-else mode="order" imgWidth="300" style="position: absolute;top: 20%;left: 50%;transform: translate(-50%,-50%);" text="暂无该订单售后详情"></tn-empty>

				
			
			

	</view>
</template>

<script>
	import {
		getOrderAftersaleDetail,
		getOrderAftersaleCancel
	} from "@/apis/index"
	export default {
		data() {
			return {
				list: [{
						name: '提交申请',
						icon: 'trusty',
						selectIcon: 'trusty-fill'

					},
					{
						name: '处理中',
						icon: 'safe',
						selectIcon: 'safe-fill'

					},
					{
						name: '完成',
						icon: 'vip',
						selectIcon: 'vip-fill'
					}
				],
				current: 1,
				refundDetail: {}
			}
		},
		async onLoad(option) {
			if (option.id) {
				await this.getDetail(option.id)
			}
		},
		methods: {
			click(e) {
				return
			},
			async getDetail(id) {
				let res = await getOrderAftersaleDetail(id)
				if (res.code == 1) {
					this.refundDetail = res.data
					if (res.data.aftersale_status ==0) {
						this.current = 1
					} else if (res.data.aftersale_status == -2) {
						this.current = 3
					} else if (res.data.aftersale_status == 1) {
						this.current = 2
					}
				}
			},
			//历史售后记录
			refundLog(){
				uni.navigateTo({
					url:`/templatePage/refundLog/refundLog?id=${this.refundDetail.id}`
				})
			},
			async cancel(){
				let res=await getOrderAftersaleCancel(this.refundDetail.id)
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				await this.getDetail(this.refundDetail.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {

		display: flex;
		// justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}

	.title2 {
		color: #999;
		font-size: 28rpx;
	}

	.right2 {
		color: #333;
		font-size: 28rpx;
	}
</style>